
var sw = 20, //方块的宽度
    sh = 20, //方块的高度
    tr = 30, //行
    td = 30; //列
var snake = null;
// 创建方块的构造函数
function Square(x,y,classname){
    /*
     *@x: 创建的x坐标
     *@y: 创建的y的坐标
     *@classname: 
    */
   this.x = x * sw;
   this.y = y * sh;
   this.class = classname;

   this.viewContent = document.createElement('div') ; //方块对应的Dom元素
   this.viewContent.className = this.class;
   this.parent = document.getElementById('snakeWrap') //方块的父级
}
// 原型对象添加create方法
Square.prototype.create = function(){
    //创建方块dom
    this.viewContent.style.position = 'absolute'
    this.viewContent.style.width = sw + 'px'
    this.viewContent.style.height = sh + 'px'
    this.viewContent.style.left = this.x + 'px'
    this.viewContent.style.top = this.y + 'px'
    // 添加到页面中
    this.parent.appendChild(this.viewContent);
}
Square.prototype.remove = function(){
    this.parent.removeChild(this.viewContent);
};

// 创建贪吃蛇
var Snake = function(){
    //存一下蛇头信息和蛇尾信息
    this.head = null;
    this.tail = null;
    this.pos = []; //存储蛇身每个方块的位置
    this.directionNum = {
        //储存蛇走的方向
        left:{
            x : -1,
            y : 0
        },
        right:{
            x : 1,
            y : 0
        },
        top:{
            x : 0,
            y : -1
        },
        bottom : {
            x : 0,
            y : 1
        }
    }
}
Snake.prototype.init = function(){



    // init方法 : 初始化
    var snakeHead = new Square(2,0,'snakeHead');
    snakeHead.create();
    this.head = snakeHead; //存储蛇头信息
    this.pos.push([2,0]); //储存蛇头位置信息
    // console.log(123);
    
    // 创建蛇身体
    var snakeBody1 = new Square(1,0,'snakeBody')
    snakeBody1.create();
    this.pos.push([1,0]);
    var snakeBody2 = new Square(0,0,'snakeBody')
    snakeBody2.create();
    this.tail = snakeBody2
    this.pos.push([0,0]);

    // 模仿数据结构链表关系联系蛇身和蛇头
    snakeHead.last = null;
    snakeHead.next = snakeBody1;

    snakeBody1.last = snakeHead;
    snakeBody1.next = snakeBody2;

    snakeBody2.last = snakeBody1;
    snakeBody2.next = null;

    // 添加一条默认属性表示初始行进方向
    this.direction = this.directionNum.right
}

//获取蛇头下一个位置对应的元素
Snake.prototype.getNextPos = function(){
    // 蛇头要走的下一个点的坐标
    var nextPos = [this.head.x/sw + this.direction.x,this.head.y/sh + this.direction.y]
    console.log(nextPos);
    //下一个点1的各种情况
    // 1.撞到自己,游戏结束
    var selfCollied = false;
    this.pos.forEach(value=>{
        if(value[0] == nextPos[0] && value[1] == nextPos[1]){
            // 下一个点和蛇身体所有方块匹配到,说明撞到自己
            selfCollied = true;

        }
    })
    if(selfCollied){
        alert('撞到自己了');
        this.strategies.die.call(this);
        return
        
    }
    // 2.撞到墙,游戏结束
    if(nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1){
        console.log('撞墙');
        this.strategies.die.call(this);
        return
    }
    // 3.下一个点是食物,变长,并且继续走

    // 4.下一个点什么都没有,继续走

        // 使用move函数并且更改this的指向
        this.strategies.move.call(this);
};
//处理碰撞后的事件
Snake.prototype.strategies = {
    move:function(){

    },
    eat:function(){

    },
    die:function(){

    }
}

snake = new Snake();
snake.init();
snake.getNextPos();